import { create } from "zustand";

import { Iview, Icomp, EditViewAction, Info } from './commonStoreTypes';

import { nanoid } from "nanoid";

function getDefaultView(): Iview {
    return {
        title: '',
        style: {
            width: 3751,
            height: 600,
            backgroundColor: '#ffffff',
            position: 'relative',
        },
        comps: []
    };
}

interface Bear extends EditViewAction{
    view: Iview;
}

const useEditStore = create<Bear>((set, get) => ({
    view: getDefaultView(),
    claearView: () => {
        set(() => ({
            view: getDefaultView()
        }))
    },
    moveView: (info: Info) => {
        const _cmp = get().view.comps
        _cmp[info.index] = {
            ..._cmp[info.index],
            style: {
                ..._cmp[info.index].style,
                left: info.left,
                top: info.top
            }
        }
        set((state: { view: Iview }) => ({
            view: { ...state.view, comps: [  ..._cmp] }
        }))
    },
    addcopm: (_cmp: Icomp) => {
        set((state: { view: Iview }) => ({
            view: { ...state.view, comps: [...state.view.comps, { ..._cmp, key: nanoid() }] }
        }))
    }
})
)
export default useEditStore;